<template>
  <div class="wrap">
    <div style="margin-right: 50px">
      <el-button type="primary" v-on:click="queryAll()">查所有信息</el-button>
      <el-button type="primary" v-on:click="dialogForm2Visible=true">添加</el-button>
      <el-button type="primary" v-on:click="mydeleteAllStudentById">批量删除</el-button>

      <span style="margin-left: 33%">
        <el-input v-model="searchId" size="mini" style="width: 10%" placeholder="请输入账号"></el-input>
        <el-button icon="el-icon-search" circle @click="searchById()"></el-button>
      </span>


      <el-input
        style="width: 10%"
        v-model="search"
        size="mini"
        placeholder="输入名字搜索"  >
      </el-input>
      <el-button icon="el-icon-search" circle @click="searchbyname()"></el-button>
    </div>

    <el-table
      :default-openeds="['/admin','/student']"
      :data="studentList"
      style="width: 2000px"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="100">
      </el-table-column>
      <el-table-column
        prop="studentId"
        label="id"
        width="100">
      </el-table-column>
      <el-table-column
        prop="studentPwd"
        label="密码"
        width="200">
      </el-table-column>
      <el-table-column
        prop="studentName"
        label="姓名"
        width="150">
      </el-table-column>
      <el-table-column
        prop="studentSex"
        label="性别" width="150">
      </el-table-column>
      <el-table-column
        prop="studentTel"
        label="电话" width="200">
      </el-table-column>
      <el-table-column
        prop="studentEMail"
        label="邮箱" width="200">
      </el-table-column>
      <el-table-column
        prop="roles"
        label="角色" width="150">
      </el-table-column>
      <el-table-column
        align="right" width="180" label="操作">
        <template slot-scope="scope" >
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">修 改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删 除</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--    修改信息内容-->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="editStudent.studentId"></el-input>
        </el-form-item>
        <el-form-item label="名字" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="editStudent.studentName"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="editStudent.studentPwd"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="editStudent.studentSex"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="editStudent.studentTel"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="editStudent.studentEMail"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false;editStudentf()">确 定</el-button>
      </div>
    </el-dialog>

<!--    信息添加内容-->
    <el-dialog title="添加信息" :visible.sync="dialogForm2Visible">
      <el-form >
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="studentAdd.studentId"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="studentAdd.studentPwd"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogForm2Visible = false">取 消</el-button>
        <el-button type="primary" @click="dialogForm2Visible = false;adduser()">确 定</el-button>
      </div>
    </el-dialog>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>


</template>

<script>

import { getAllStudentInfo,addStudent,editStudentInfoById ,deleteStudentById,getStudentInfoByName,deleteAllStudentById,getStudentInfoById} from '@/api/admin/student/student'
import qs from 'qs'

export default {
  name: "student",
  data(){
    return{
      studentList:[],
      search: '',
      dialogFormVisible: false,
      dialogForm2Visible:false,
      formLabelWidth: '120px',
      studentAdd:{studentId: "",studentPwd: ""},
      editStudent:{},
      multipleSelection: [],
      selectIds:[],
      searchId:'',
      currentPage: 1,
      total:1,
      pageSize:5,pageNum: 1
    }
  },

  created() {
    this.queryAll();
  },
  methods:{
    handleSizeChange(val) {
      this.pageSize=val;
      this.queryAll();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.queryAll()
    },
    searchById(){
      getStudentInfoById(qs.stringify({studentid:this.searchId})).then(res => {
        this.studentList = res.data.students
      }).catch(function (error) {
        //console.log(error);
      });
    },

    mydeleteAllStudentById(){
      this.multipleSelection.forEach(student => {
        this.selectIds.push(student.studentId)
      })
      // qs.stringify(this.selectIds)
      //console.log(this.selectIds.toString())
      deleteAllStudentById(this.selectIds.toString()).then(res =>{
        //this.selectIds=[]
        if (res.status==200){
          this.queryAll()
        }else {

        }

      }).catch(err => {
        console.log("批量删除错误")
      })
      //   console.log(this.selectIds)
        //deleteAllStudentById()
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    adduser(){
      let userData = {
        studentId:this.studentAdd.studentId,
        studentPwd:this.studentAdd.studentPwd,
      }
      let data = qs.stringify(userData);

      addStudent(data).then(res =>{
        if (res.status==200){
          this.studentList.push(this.studentAdd)
          this.studentAdd={studentId: "",studentPwd: ""}
        }else {
          console.log("添加失败")
        }
      }).catch(err => {
        console.log('添加student失败',err)
      })


    },
    editStudentf(){
      let userData = {
        studentId:this.editStudent.studentId,
        studentPwd:this.editStudent.studentPwd,
        studentName:this.editStudent.studentName,
        studentSex:this.editStudent.studentSex,
        studentTel:this.editStudent.studentTel,
        studentEMail:this.editStudent.studentEMail
      }
      let data = qs.stringify(userData);

      editStudentInfoById(data).then( res =>{
        if (res.status==200){
          //
        }
      }).catch(err => {
        console.log('更新student失败',err)
      })
    },
    queryAll() {
      getAllStudentInfo(this.pageNum,this.pageSize).then( res =>{
        this.studentList = res.data.Students
        this.total = res.data.total
      }).catch(err => {
        console.log('获取student失败',err)
      })
    },
    handleEdit(index, row) {
      this.editStudent=this.studentList[index]
      this.dialogFormVisible = true
    },
    handleDelete(index, row) {

      deleteStudentById(qs.stringify({studentid : this.studentList[index].studentId})).then(res =>{
        this.studentList.splice(index,1)
      }).catch(function (error) {
        //console.log(error);
      });

    },
    searchbyname(){
      getStudentInfoByName(qs.stringify({studentname:this.search})).then(res => {
        this.studentList = res.data.students
      }).catch(function (error) {
        //console.log(error);
      });
    }
  }
}
</script>

<style lang="scss" scoped>
  .wrap{
    width: 2000px;
    height: 100%;
    margin-top: 10px;
    margin-left: 10px;
  }

</style>
